<template>
  <view class="order-success-page">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-btn" @click="navigateBack">
        <image class="back-icon" src="/static/Images/shop/Fanhuih.png" mode="aspectFit"></image>
      </view>
      <view class="title">{{ statusInfo.title }}</view>
    </view>
    
    <!-- 状态信息 -->
    <view class="success-status" :class="statusInfo.statusClass">
      <view class="success-left">
        <view class="success-icon-wrapper" :style="{ backgroundColor: statusInfo.iconBgColor }">
          <image class="success-icon" :src="statusInfo.iconSrc" mode="aspectFit"></image>
        </view>
      </view>
      <view class="success-right">
        <view class="success-text">{{ statusInfo.statusText }}</view>
      </view>
    </view>
    <view class="success-desc">{{ statusInfo.statusDesc }}</view>
    
    <!-- 商品信息 -->
    <view class="product-info">
      <view class="product-item">
        <image class="product-image" src="/static/Images/goods/Goods.png" mode="aspectFit"></image>
        <view class="product-details">
          <view class="product-name">商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view>
          <view class="product-name">商品名称商品名称商品名称商品名称</view>
        </view>
      </view>
      
      <view class="price-info">
        <text class="price-label">成交价</text>
        <text class="price-value">¥124.82</text>
      </view>
    </view>
    
    <!-- 订单信息 -->
    <view class="order-info">
      <view class="info-item">
        <text class="info-label">订单编号：</text>
        <text class="info-value">12345621548425598</text>
        <image class="copy-icon" src="/static/Images/order/Fuzhi.png" mode="aspectFit" @click="copyOrderNumber"></image>
      </view>
      
      <view class="info-item">
        <text class="info-label">充值账号：</text>
        <text class="info-value">{{showFullAccount ? fullAccount : maskedAccount}}</text>
        <image class="view-icon" :src="showFullAccount ? '/static/Images/order/Yincang.png' : '/static/Images/order/Chakan.png'" mode="aspectFit" @click="toggleAccountView"></image>
        <image class="copy-icon" src="/static/Images/order/Fuzhi.png" mode="aspectFit" @click="copyAccount"></image>
      </view>
      
      <view class="info-item">
        <text class="info-label">下单时间：</text>
        <text class="info-value">2025-06-12 16:21:42</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">付款时间：</text>
        <text class="info-value">2025-05-30 15:54:23</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">发货时间：</text>
        <text class="info-value">2025-05-30 15:54:23</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">成交时间：</text>
        <text class="info-value">2025-05-30 15:54:23</text>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <button class="btn-secondary" @click="deleteOrder">删除订单</button>
      <button class="btn-primary" @click="buyAgain">再次购买</button>
    </view>
    
    <!-- 底部指示器 -->
    <view class="bottom-indicator"></view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

// 账号显示状态
const showFullAccount = ref(false);
const fullAccount = ref('183****3536');
const maskedAccount = ref('183****3536');

// 交易状态信息
const statusInfo = reactive({
  title: '交易详情',
  statusText: '交易成功',
  statusDesc: '恭喜，您的订单已交易成功！',
  iconSrc: '/static/Images/shop/Chenggong.png',
  statusClass: 'status-success'
});

// 获取URL参数并设置状态
const setStatusByUrlParam = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const status = currentPage.$page?.options?.status || 'success';
  
  switch(status) {
    case 'success':
      statusInfo.title = '交易成功';
      statusInfo.statusText = '交易成功';
      statusInfo.statusDesc = '恭喜，您的订单已交易成功！';
      statusInfo.iconSrc = '/static/Images/shop/Chenggong.png';
      statusInfo.statusClass = 'status-success';
      break;
    case 'pending':
      statusInfo.title = '交易处理中';
      statusInfo.statusText = '正在交易';
      statusInfo.statusDesc = '您的订单正在处理中，请耐心等待...';
      statusInfo.iconSrc = '/static/Images/shop/Dengdai.png'; // 需要替换为实际的等待图标
      statusInfo.statusClass = 'status-pending';
      break;
    case 'closed':
      statusInfo.title = '交易关闭';
      statusInfo.statusText = '交易关闭';
      statusInfo.statusDesc = '很遗憾，您的订单已关闭';
      statusInfo.iconSrc = '/static/Images/shop/Shibai.png'; // 需要替换为实际的关闭图标
      statusInfo.statusClass = 'status-closed';
      break;
    default:
      // 默认为成功状态
      statusInfo.title = '交易成功';
      statusInfo.statusText = '交易成功';
      statusInfo.statusDesc = '恭喜，您的订单已交易成功！';
      statusInfo.iconSrc = '/static/Images/shop/Chenggong.png';
      statusInfo.statusClass = 'status-success';
  }
};

// 页面加载时设置状态
onMounted(() => {
  setStatusByUrlParam();
});

// 返回上一页
const navigateBack = () => {
  uni.navigateBack();
};

// 复制订单号
const copyOrderNumber = () => {
  uni.setClipboardData({
    data: '12345621548425598',
    success: () => {
      uni.showToast({
        title: '订单号已复制',
        icon: 'success'
      });
    }
  });
};

// 切换账号显示
const toggleAccountView = () => {
  showFullAccount.value = !showFullAccount.value;
};

// 复制账号
const copyAccount = () => {
  uni.setClipboardData({
    data: fullAccount.value,
    success: () => {
      uni.showToast({
        title: '账号已复制',
        icon: 'success'
      });
    }
  });
};

// 删除订单
const deleteOrder = () => {
  uni.showModal({
    title: '提示',
    content: '确定要删除此订单吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: '订单已删除',
          icon: 'success'
        });
        setTimeout(() => {
          navigateBack();
        }, 1500);
      }
    }
  });
};

// 再次购买
const buyAgain = () => {
  uni.showToast({
    title: '再次购买功能开发中',
    icon: 'none'
  });
};
</script>

<style lang="scss">
.order-success-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  padding-bottom: 120rpx;
}

/* 顶部导航栏 */
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  padding-top: 44px;
  background-color: #fff;
  position: relative;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 30rpx;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

/* 成功状态 */
.success-status {
  background-color: #f5f5f5;
  padding: 30rpx 30rpx 15rpx;
  display: flex;
  align-items: center;
}

.success-left {
  margin-right: 20rpx;
}

.success-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.success-icon-wrapper {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.success-icon {
  width: 40rpx;
  height: 40rpx;
}

.success-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.success-desc {
  font-size: 26rpx;
  color: #999;
  padding-left: 1rem;
  margin-top: 8rpx;
  margin-bottom: 15rpx;
  background-color: #f5f5f5;
  padding-bottom: 15rpx;
}

/* 商品信息 */
.product-info {
  background-color: #fff;
  margin: 20rpx 20rpx 0;
  border-radius: 12rpx;
  padding: 30rpx;
}

.product-item {
  display: flex;
  margin-bottom: 20rpx;
}

.product-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  background-color: #f5f5f5;
  margin-right: 20rpx;
}

.product-details {
  flex: 1;
}

.product-name {
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
  margin-bottom: 8rpx;
}

.price-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20rpx;
  border-top: 1px solid #f0f0f0;
}

.price-label {
  font-size: 28rpx;
  color: #666;
}

.price-value {
  font-size: 32rpx;
  color: #ff4d4f;
  font-weight: 600;
}

/* 订单信息 */
.order-info {
  background-color: #fff;
  margin: 20rpx 20rpx 0;
  border-radius: 12rpx;
  padding: 30rpx;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 28rpx;
  color: #666;
  width: 160rpx;
  flex-shrink: 0;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.copy-icon, .view-icon {
  width: 40rpx;
  height: 40rpx;
  margin-left: 16rpx;
}

/* 底部按钮 */
.bottom-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.btn-secondary, .btn-primary {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: 500;
}

.btn-secondary {
  background-color: #fff;
  color: #666;
  border: 1px solid #ddd;
  margin-right: 20rpx;
}

.btn-primary {
  background-color: #ff4d4f;
  color: #fff;
}

/* 底部指示器 */
.bottom-indicator {
  width: 120rpx;
  height: 8rpx;
  background-color: #ddd;
  border-radius: 4rpx;
  margin: 30rpx auto;
}
</style>